<!-- TODO: 后端没接口 -->
<template>
  <div class="app-container">
    <el-card class="Card" shadow="always" :body-style="{ padding: '20px' }">
      <div class="CardHeader">
        <h1 class="h1">通用标准定义</h1>
        <Table :tableData="tableData" :tableHeader="tableHeader" :selection="false" />
      </div>
      <div class="CardMain">
        <h1 class="h1">按品牌定义</h1>
        <Table :tableData="tableData1" :tableHeader="tableHeader1" :selection="false" :TableHeight="'120rem'" />
      </div>
      <div class="CardBottomO">
        <h1 class="h1">按货号定义</h1>
        <Table :tableData="tableData1" :tableHeader="tableHeader1" :selection="false" :TableHeight="'125rem'" />
      </div>

      <div class="CardBottom">
        <div style="float: right">
          <el-button style="background-color: #e7e7e7; border: 0; color: black" type="primary" size="default" @click="">保存</el-button>
          <el-button type="primary" size="default" @click="">打印</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'TimeThreshold'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref } from 'vue'
// 表格数据
const tableData = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  }
]

const tableHeader = ref([
  {
    label: '纸板',
    prop: 'customer'
  },
  {
    label: '材料',
    prop: 'instruction'
  },
  {
    label: '裁剪',
    prop: 'shape'
  },
  {
    label: '电雕',
    prop: 'shape'
  },
  {
    label: '印刷/高屏',
    prop: 'shape'
  },
  {
    label: '无缝',
    prop: 'shape'
  },
  {
    label: '裁剪配套',
    prop: 'shape'
  },
  {
    label: '大底',
    prop: 'shape'
  },
  {
    label: '针车',
    prop: 'shape'
  },
  {
    label: '成型',
    prop: 'shape'
  }
])

// 表格数据
const tableData1 = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  }
]

const tableHeader1 = ref([
  {
    label: '品牌',
    prop: 'customer'
  },
  {
    label: '纸板',
    prop: 'instruction'
  },
  {
    label: '材料',
    prop: 'shape'
  },
  {
    label: '裁剪',
    prop: 'shape'
  },
  {
    label: '电雕',
    prop: 'shape'
  },
  {
    label: '高频',
    prop: 'shape'
  },
  {
    label: '无缝',
    prop: 'shape'
  },
  {
    label: '针车',
    prop: 'shape'
  },
  {
    label: '成型',
    prop: 'shape'
  }
])
</script>

<style lang="less" scoped>
.Card {
  width: 100%;
  height: calc(100vh - 120px);
}

.CardHeader {
  height: 50%;
}

.CardBottom {
  margin-top: 5rem;
}

.CardBottomO {
  margin-top: 12rem;
}

.CardMain {
  margin-top: 12rem;
}

.h1 {
  font-size: 16px;
}
</style>
